<template>
  <div class="search-history">
    <!-- 标题 -->
    <van-cell title="搜索历史">
      <template>
        <van-icon @click="isShowDel = false" name="delete-o" v-if="isShowDel" />
        <div v-else>
          <span @click="delAll">全部删除</span>
          <!-- <span @click="history.splice(0)">全部删除</span> -->
          <span @click="isShowDel = true" style="margin-left: 5px">完成</span>
        </div>
      </template>
    </van-cell>
    <!-- 搜索列表 -->
    <van-cell v-for="(item, index) in history" @click="delItem(index)" :key="index" :title="item">
      <template>
        <van-icon name="close" v-if="!isShowDel" />
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  props: {
    history: {
      type: Array
    }
  },
  data () {
    return {
      isShowDel: true
    }
  },

  created () {},

  methods: {
    delAll () {
      this.$emit('allDel')
    },
    delItem (i) {
      if (this.isShowDel) {
        this.$emit('search', this.history[i])
      } else {
        this.history.splice(i, 1)
      }
    }
  }
}
</script>

<style scoped lang="less"></style>
